<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    tooltip: {
        trigger: 'axis',
        // axisPointer: {
        //     type: 'shadow',
        // },
    },
    grid: {
        top: '12%',
        right: '5%',
        left: '0%',
        bottom: '5%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: props.xData,
            axisLine: {
                lineStyle: {
                    color: '#02387B',
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                // margin: 10,
                color: '#ffffff',
                textStyle: {
                    fontSize: 12,
                },
            },
        },
    ],
    yAxis: [
        {
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255, 255, 255, 0.5)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
    ],
    series: [
        {
            type: 'line',
            data: props.sData,
            smooth: true,
            itemStyle: {
                color: '#02FBFD',
            },
            lineStyle: {
                color: '#02FBFD',
                width: 3
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: 'rgba(2,251,253,0.16)', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(2,251,253,0.00)', // 100% 处的颜色
                        },
                    ],
                    false
                ),
            },
            label: {
                normal: {
                    position: 'top',
                    color: '#fff',
                    show: true,
                    // lineHeight: 30,
                    // width: 80,
                    // height: 30,
                    // backgroundColor: 'rgba(0,160,221,0.1)',
                    // borderRadius: 200,
                    // position: ['-8', '-60'],
                    // distance: 1,
                    // formatter: [
                    //     '    {d|●}',
                    //     ' {a|{c}}     \n',
                    //     '    {b|}'
                    // ].join(','),
                    // rich: {
                    //     d: {
                    //         color: '#3CDDCF',
                    //     },
                    //     a: {
                    //         color: '#fff',
                    //         align: 'center',
                    //     },
                    //     b: {
                    //         width: 1,
                    //         height: 30,
                    //         borderWidth: 1,
                    //         borderColor: '#234e6c',
                    //         align: 'left'
                    //     },
                    // }
                },
            },
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
